import globalStyles from "@/common/styles/globalStyles";
import React from "react";
import {
	GestureResponderEvent,
	Image,
	StyleSheet,
	Text,
	TouchableOpacity,
	View,
} from "react-native";

export default function IconTextButton(props: {
	type?: string;
	backgroundColor?: string;
	iconPath: any;
	iconSize?: number;
	buttonText: string;
	textColor?: string;
	onPress?: (event: GestureResponderEvent) => void;
}) {
	const {
		iconPath,
		iconSize = 30,
		buttonText,
		backgroundColor,
		textColor = "#000",
		type = "column",
		onPress,
	} = props;
	return (
		<TouchableOpacity onPress={onPress}>
			<View
				style={[
					type === "column"
						? { alignItems: "center" }
						: [globalStyles.rowLine, globalStyles.jcCenter, styles.rowButton],
					{ backgroundColor },
				]}
			>
				<Image
					style={[
						type === "column"
							? styles.menuImageColumn
							: styles.menuImageRow,
						{ width: iconSize, height: iconSize },
					]}
					source={iconPath}
				/>
				<Text style={[styles.buttonText, { color: textColor }]}>
					{buttonText}
				</Text>
			</View>
		</TouchableOpacity>
	);
}
const styles = StyleSheet.create({
	menuImageColumn: {
		marginBottom: 8,
	},
	menuImageRow: {
		marginRight: 8,
	},
	buttonText: {
		fontSize: 12,
		fontWeight: "600",
	},
    rowButton:{
        paddingVertical:12 ,
        borderRadius:6
    }
});
